<link rel="stylesheet" href="{{ url_for('static', filename='css/pages/osm_map.css') }}">
{% extends 'base.html' %}
{% block content %}
<div class="container">
    <a class="btn btn-primary" href="/">Назад</a>
    <form id="coordsForm" method="get" action="{{ url_for('osm_map') }}">
        <div class="form-group">
            <label for="lat1">Точка 1: X</label>
            <input type="text" id="lat1" name="lat1" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="lon1">Точка 1: Y</label>
            <input type="text" id="lon1" name="lon1" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="lat2">Точка 2: X:</label>
            <input type="text" id="lat2" name="lat2" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="lon2">Точка 2: Y</label>
            <input type="text" id="lon2" name="lon2" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">Показать область</button>
    </form>
    {% if region_info %}
    <div class="region-info">
        {% if region_info %}
        <h2>Информация о регионе</h2>
        <p>ID: {{ region_info.id }}</p>
        <p>Название: {{ region_info.name }}</p>
        <p>Широта: {{ region_info.latitude }}</p>
        <p>Долгота: {{ region_info.longitude }}</p>
        {% endif %}
    </div>
    {% endif %}
    <div class="map-block">
        {{ map_html|safe }}
    </div>
</div>
{% endblock %}
